<template>
  <div class="feedbackDetails">
    <el-card>
      <div class="feedbackBOX" v-show="this.show == 1">
        <p>反馈人</p>
        <div class="one">
          <el-input placeholder="请输入ID" disabled v-model="feedbackId">
            <template slot="prepend">ID</template>
          </el-input>
          <el-input placeholder="请输入昵称" disabled v-model="feedbackName">
            <template slot="prepend">昵称</template>
          </el-input>
          <p>反馈时间:{{ feedbackTime }}</p>
        </div>

        <div class="two">
          <p>故障内容</p>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入故障内容"
            v-model="faultContent"
            disabled
          >
          </el-input>
        </div>

        <div class="two">
          <p>故障图片</p>
          <el-image
            class="img"
            v-for="i in troublePicture"
            :key="i"
            :src="i"
            :preview-src-list="troublePicture"
          >
          </el-image>
        </div>

        <div class="three">
          <div class="a">
            <p>故障回复</p>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="故障回复"
              v-model="failback"
              disabled
            >
            </el-input>
          </div>
          <div class="b">
            <p>图片回复</p>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="图片回复"
              v-model="pictureReply"
              disabled
            >
            </el-input>
          </div>
        </div>
      </div>

      <div class="reportBox" v-show="this.show == 2">
        <div class="reportBox_one">
          <div>
            <p>举报人</p>
            <div class="one">
              <el-input placeholder="请输入ID" disabled v-model="informantId">
                <template slot="prepend">ID</template>
              </el-input>
              <el-input
                placeholder="请输入昵称"
                disabled
                v-model="informantName"
              >
                <template slot="prepend">昵称</template>
              </el-input>
            </div>
          </div>
          <div>
            <p>被举报人</p>
            <div class="one">
              <el-input placeholder="请输入ID" disabled v-model="informantsId">
                <template slot="prepend">ID</template>
              </el-input>
              <el-input
                placeholder="请输入昵称"
                disabled
                v-model="informantsName"
              >
                <template slot="prepend">昵称</template>
              </el-input>
            </div>
          </div>
        </div>

        <div class="four">
          <p>举报时间:{{ reportingTime }}</p>
          <p>最新举报时间:{{ newReportingTime }}</p>
          <p>被投诉次数:{{ complainedAbout }}</p>
        </div>

        <div class="two">
          <p>投诉内容</p>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入投诉内容"
            v-model="complaintContent"
            disabled
          >
          </el-input>
        </div>

        <div class="two">
          <p>投诉图片</p>
          <el-image
            class="img"
            v-for="j in complaintPicture"
            :key="j"
            :src="j"
            :preview-src-list="complaintPicture"
          >
          </el-image>
        </div>

        <div class="three">
          <div class="a">
            <p>投诉回复</p>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="投诉回复"
              v-model="responseToComplaints"
              disabled
            >
            </el-input>
          </div>
          <div class="b">
            <p>图片回复</p>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="图片回复"
              v-model="pictureReply"
              disabled
            >
            </el-input>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  feedbackDetails,
  feedbackProposalDetails,
} from "@/api/NotificationManagement";

export default {
  data() {
    return {
      //反馈
      id: "",
      feedbackId: "", //反馈人ID
      feedbackName: "", //反馈人昵称
      feedbackTime: "", //反馈时间
      faultContent: "", //故障内容
      troublePicture: [], //故障图片
      failback: "", //故障回复
      pictureReply: "", //图片回复
      //举报
      informantId: "", //举报人ID
      informantName: "", //举报人昵称
      informantsId: "", //被举报人ID
      informantsName: "", //被举报人昵称
      reportingTime: "", //举报时间
      newReportingTime: "", //最新举报时间
      complainedAbout: "", //被投诉次数
      complaintContent: "", //投诉内容
      complaintPicture: [], //投诉图片
      responseToComplaints: "", //投诉回复
      pictureReply: "", //图片回复

      show: 1,
    };
  },
  methods: {
    list() {
      if (this.$route.query.feedbackType == 1) {
        this.show = 1;
        //建议
        feedbackProposalDetails({
          id: this.$route.query.id,
          feedbackType: this.$route.query.feedbackType,
        }).then((res) => {
          if (res.code == 0) {
            this.feedbackId = res.data.feedbackId;
            this.feedbackName = res.data.feedbackName;
            this.feedbackTime = res.data.feedbackTime;
            this.faultContent = res.data.faultContent;
            this.troublePicture = res.data.troublePicture;
            this.failback = res.data.failback;
            this.pictureReply = res.data.pictureReply;
            this.id = res.data.id;
          }
        });
      } else {
        this.show = 2;
        //举报
        feedbackDetails({
          id: this.$route.query.id,
          feedbackType: this.$route.query.feedbackType,
        }).then((res) => {
          if (res.code == 0) {
            this.informantId = res.data.informantId;
            this.informantName = res.data.informantName;
            this.informantsId = res.data.informantsId;
            this.informantsName = res.data.informantsName;
            this.reportingTime = res.data.reportingTime;
            this.newReportingTime = res.data.newReportingTime;
            this.complainedAbout = res.data.complainedAbout;
            this.complaintContent = res.data.complaintContent;
            this.complaintPicture = res.data.complaintPicture;
            this.responseToComplaints = res.data.responseToComplaints;
            this.pictureReply = res.data.pictureReply;
          }
        });
      }
    },
  },
  created() {
    this.list();
  },
};
</script>

<style lang="less" scoped>
.feedbackDetails {
  margin: 30px;
  height: 100%;
  .feedbackBOX {
    .one {
      display: flex;
      .el-input {
        width: 300px;
        height: 40px;
        margin-right: 40px;
      }
    }
    .two {
      .img {
        width: 160px;
        height: 160px;
        border-radius: 4px;
        margin-right: 10px;
      }
    }
    .three {
      display: flex;
      justify-content: space-between;
      .a {
        width: 40%;
      }
      .b {
        width: 40%;
      }
    }
  }
  .reportBox {
    .reportBox_one {
      display: flex;
      justify-content: space-between;
      .one {
        display: flex;
        .el-input {
          width: 300px;
          margin-right: 20px;
        }
      }
    }
    .four {
      display: flex;
      margin-top: 20px;
      p {
        margin-right: 60px;
      }
    }
  }
}
</style>